<template>
  <div class="content">
    <!-- #ifndef MP-WEIXIN-->
    <my-navbar
      leftText="我的资质"
      :height="100"
      :background="'#ffffff'"
      @leftClick="back"
    ></my-navbar>
    <!-- #endif -->

    <div class="examine column_start">
      <!-- 审核信息 -->
      <div class="column_start">
        <div class="examine-image row_start">
          <span>资质审核文件:</span>
          <div class="examine-image-upload" @click="upload" v-if="!show">+</div>
          <div class="examine-image-img" v-if="show" @click="upload">
            <image :src="avatarUrl" alt=""></image>
          </div>
        </div>

        <div class="examine-state row_start">
          <span>资质审核结果:</span>
          <div class="examine-state-success">
            {{
              state == "3"
                ? "审核失败"
                : state == "2"
                ? "审核成功"
                : state == "1"
                ? "待审核"
                : "未提交审核"
            }}
          </div>
        </div>
        <div class="examine-state row_start" v-if="state == '3'">
          <span>资质审核原因:</span>
          <div class="examine-state-success">
            {{
              state == "3"
                ? "审核失败"
                : state == "2"
                ? "审核成功"
                : state == "1"
                ? "待审核"
                : "未提交审核"
            }}
          </div>
        </div>

        <div class="examine-btn" @click="submit">提交审核</div>
      </div>
    </div>
  </div>
</template>

<script>
import { $https } from "@/static/js/request.js";
export default {
  data() {
    return {
      //上传地址
      action: `${getApp().globalData.rootUrl}/partner/uploadFeedImg`,

      // 审核状态: 0->未提交审核;1->待审核;2->审核成功;3->审核失败
      state: null,
      avatarUrl: null,
      show: false,
    };
  },
  onReady() {
    getApp().setTitle();
  },
  onLoad() {
    this.token = uni.getStorageSync("copartner_token");
    if (this.token) {
      this.getData();
    }
  },
  created() {
    // 监听从裁剪页发布的事件，获得裁剪结果
    uni.$on("uAvatarCropper", (path) => {
      // 可以在此上传到服务端
      uni.uploadFile({
        url: this.action,
        filePath: path,
        name: "img",
        formData: {
          type: 3,
        },
        header: {
          Authorization: uni.getStorageSync("copartner_token"),
        },
        success: (res) => {
          let data = JSON.parse(res.data);
          this.avatarUrl = data.data.src;
          this.show = true;
        },
        fail() {
          uni.showToast({
            icon: "none",
            title: "上传失败，请重试",
          });
        },
      });
    });
  },
  methods: {
    back() {
      // #ifdef H5
      window.history.back(-1);
      // #endif
      // #ifndef H5
      uni.navigateBack();
      // #endif
    },

    upload() {
      uni
        .navigateTo({
          // 关于此路径，请见下方"注意事项"
          url: "/pages/user/u-avatar-cropper/u-avatar-cropper",
          // 内部已设置以下默认参数值，可不传这些参数
          params: {
            // 输出图片宽度，高等于宽，单位px
            destWidth: 300,
            // 裁剪框宽度，高等于宽，单位px
            rectWidth: 200,
            // 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
            fileType: "jpg",
          },
        })
        .then((res) => {});
    },

    getData() {
      $https("GETN", "getUserInfo", {}, (res) => {
        if (res.data.errcode == 0) {
          this.state = res.data.data.type;
          this.avatarUrl = res.data.data.business_license;
          if (this.avatarUrl) this.show = true;
          else this.show = false;
        }
      });
    },

    // 提交审核
    submit() {
      if (this.state == 2) {
        uni.showModal({
          title: "提示",
          content: "上传资质文件后需再次提交审核,是否确定?",
          success: function (res) {
            if (res.confirm) {
              this.submitEvent();
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          },
        });
      } else {
        this.submitEvent();
      }
    },

    submitEvent() {
      if (!this.avatarUrl) {
        uni.showToast({
          title: "请上传资质文件后再提交审核!",
          duration: 2000,
          icon: "none",
        });
        return;
      }
      let data = {
        business_license: this.avatarUrl,
      };
      $https("POST", "editBusinessLicense", data, (res) => {
        console.log(res.data);
        if (res.data.errcode == 0) {
          uni.showToast({
            title: res.data.errmsg,
            duration: 2000,
            icon: "none",
          });
          uni.navigateBack();
        } else if (res.data.errcode == "-1") {
          uni.showToast({
            title: res.data.errmsg,
            duration: 2000,
            icon: "none",
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  position: absolute;
  inset: 0;
  background-color: #fff;

  .examine {
    width: 690rpx;
    margin: 0 auto;
    padding: 40rpx 0;

    &-image {
      align-items: flex-start;

      span {
        font-size: $font_4;
        font-weight: 600;
      }

      &-upload {
        width: 198rpx;
        height: 198rpx;
        border: 1rpx solid #e1e1e1;
        margin-left: 40rpx;
        position: relative;
        text-align: center;
        line-height: 198rpx;
        font-size: 68rpx;
        font-weight: 600;
      }

      &-img {
        width: 198rpx;
        height: 198rpx;
        margin-left: 40rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    &-state {
      align-items: center;
      margin-top: 40rpx;

      span {
        font-size: 24rpx;
        font-weight: 600;
      }

      &-success {
        margin-left: 40rpx;
      }
    }

    &-btn {
      width: 660rpx;
      margin: 40rpx auto;
      height: 66rpx;
      text-align: center;
      line-height: 66rpx;
      background-color: #55a68c;
      border-radius: 10rpx;
      color: #fff;
      font-size: 26rpx;
      font-weight: 600;
    }
  }
}
</style>